<template >
  <div class="shop">
    <el-card class="el-card">
      <div  >
        <h1 style="text-align: center " >翔哥小店</h1>
        <el-divider />
        <div>
          <h4>分类:</h4>
          <div>
            <el-button   class="transparent-button" @click="getAll">全部</el-button>
            <el-button :icon="Soccer"  class="transparent-button" >橄榄球</el-button>
            <el-button :icon="Football"  class="transparent-button" @click="selectFootball">足球</el-button>
            <el-button :icon="Baseball"  class="transparent-button" @click="selectBasketball">篮球</el-button>
            <el-button :icon="Help"  class="transparent-button">其它</el-button>


          </div>
        </div>
        <el-divider />
        <div >
          <el-button  color="#" @click="buyFrom = true" style="color: plum" >成为卖家</el-button>
          <el-button  color="#" @click="myShop" style="color: plum" >我的发布</el-button>
          <el-dialog v-model="buyFrom" title="添加商品"  center  width="600"  draggable >
            <el-form style="width: 300px;margin-left: 130px" :model="addGoods">
              <el-form-item label="商品名称" >
                <el-input  v-model="addGoods.name" clearable />
              </el-form-item>
              <el-form-item label="商品类型" >
                <el-select
                    v-model="addGoods.type"
                    placeholder="请输入类型"
                    style="width: 240px"
                >
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="商品价格" >
                <el-input  v-model="addGoods.price" clearable/>
              </el-form-item>
              <el-form-item label="商品简介" >
                <el-input  v-model="addGoods.main" type="textarea" clearable/>
              </el-form-item>
              <el-upload
                  drag
                  action="#"
                  multiple
                  :auto-upload="false"
              >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                  Drop file here or <em>click to upload</em>
                </div>
                <template #tip>
                  <div style="text-align: center;font-size: 11px;color: #99a9bf">
                    jpg/png files with a size less than 500kb
                  </div>
                </template>
              </el-upload>
            </el-form>

            <template #footer>
              <div >
                <el-button @click="">关闭</el-button>
                <el-button type="primary" @click="adGoods(addGoods)">
                  提交
                </el-button>
              </div>
            </template>
          </el-dialog>
        </div>

        <div style="text-align: right ">
          <el-input
              v-model="searchGoods"
              clearable
              style="width: 230px;height: 30px;caret-color: auto;"
              placeholder="请输入搜索"
          />
          <el-button :icon="Search" circle type="primary" />
<!--          <el-button type="warning" :icon="Star" @click="Cat" circle />-->
        </div>



      </div>

        <el-row class="el-row">
          <el-col v-for="(item, index) in lists" :key="index" :span="5" class="el-col">
            <div style="height: 300px">
              <router-link :to="{path:'/user/shop/shopMain',query: {id: item.id}}">
                <img :src="item.img" class="img" />
              </router-link>
              <div style="padding: 20px">
                <span>{{ item.name }}</span>
                <div>
                  <span style="font-size:12px;" >类型:  {{ item.type }}</span>
                </div>
                <div>
                  <span style="font-size:12px;">价格:  {{ item.price }}  rmb</span>
                </div>
                <div>
                  <span style="font-size:10px;">日期:  {{ item.time }}</span>
                </div>
              </div>
            </div>

          </el-col>

        </el-row>

        <el-pagination background layout="prev, pager, next" :total=total @current-change="getPage" />

      <el-divider />
      <div style="text-align: center">
        <span style="font-size: 10px">感谢xx合作~~~</span>
      </div>
      <el-divider />



    </el-card>
  </div>
</template>
<script  setup>
import {inject, onBeforeMount, onMounted, ref} from 'vue'
import {Search,Star,Soccer,Football,Baseball,Help} from '@element-plus/icons-vue'
import * as goodsApi from '@/api/goods.js'
import router from "../../../router";
import {ElMessage} from "element-plus";

const buyFrom = ref(false)
const loading = ref(true)
const lists = ref([])
const total = ref()
const searchGoods = ref('')
const addGoods = ref({})
const reload = inject('reload')
const options = [
  {
    value: 'basketball',
    label: '篮球',
  },
  {
    value: 'football',
    label: '足球',
  },
  {
    value: 'rugby',
    label: '橄榄球',
  },
  {
    value: 'other',
    label: '其它',
  },
]

function getPage(newpage){
  goodsApi.selectGoods(newpage).then(resp=>{
    lists.value =resp.data.data
  })
}

onBeforeMount(()=>{
    goodsApi.selectGoods(1).then(resp=>{
        lists.value =resp.data.data
        total.value = resp.data.count
      })
    })

onMounted(() => {
  loading.value = false
})

const myShop=()=>{
  router.push('/user/myShop')
}
const adGoods=(goods)=>{
  goodsApi.addGoods(goods).then(resp=>{
    ElMessage({showClose: false, message: '添加成功,请等待审核', type: 'success'})
  })
  reload()
}
const selectBasketball=()=>{
  goodsApi.selectBasketball().then(resp=>{
    lists.value =resp.data
  })
}

const selectFootball=()=>{
  goodsApi.selectFootball().then(resp=>{
    lists.value =resp.data
  })
}
const getAll=()=>{
  reload()
}

</script>
<style scoped>

  .shop{
    margin-right: 60px;
    margin-left: 60px;
  }
  .el-row{
    margin-left: 70px;
    margin-top: 30px;
    justify-content: center;
    align-items: center;


  }
  .el-card{
    background-color: #d9ecff
  }

  .img{
    border-radius: 10px;
    width: 200px;
    height: 180px;
   text-align: center;
  }
  h1{
    font-family:STCaiyun;
    font-size:60px;
    margin: 0;
    color:  #fcd3d3;
  }
  .transparent-button{
    background-color: rgba(0, 0, 0, 0); /* 设置为完全透明 */
  }

</style>
